<template>
    <div>
        <a-modal
            title="菜单管理"
            :visible="visible"
            :confirm-loading="confirmLoading"
            :maskClosable="false"
            width="580px"
            @ok="handleOk"
            @cancel="handleCancel">
            <div style="max-height: 400px; overflow-y: auto;">
                <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
                    <a-form-model-item ref="name" label="菜单名称" prop="name">
                        <a-input v-model="form.name" />
                    </a-form-model-item>
                    <a-form-model-item label="菜单类型" prop="menutype">
                        <a-radio-group v-model="form.menutype" :default-value="form.menutype">
                            <a-radio :value="0">
                                目录
                            </a-radio>
                            <a-radio :value="1">
                                菜单
                            </a-radio>
                            <a-radio :value="2">
                                按钮
                            </a-radio>
                            <a-radio :value="3">
                                功能
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="菜单图标" prop="icon" v-if="form.menutype !== 2">
                        <a-popover v-model="popoverVisible" title="图标" trigger="click">
                            <a slot="content">
                                <a-radio-group :value="theme" @change="handleThemeChange">
                                        <a-radio-button value="gold">
                                            <a-icon type="gold" />
                                            <span style="margin-left:8px">全部</span>
                                        </a-radio-button>
                                        <a-radio-button value="outline">
                                            <a-icon type="outline" />
                                            <span style="margin-left:8px">线框风格</span>
                                        </a-radio-button>
                                        <a-radio-button value="fill">
                                            <a-icon type="fill" />
                                            <span style="margin-left:8px">实体分格</span>
                                        </a-radio-button>
                                        <a-radio-button value="twotone">
                                            <a-icon type="twotone" />
                                            <span style="margin-left:8px">双色风格</span>
                                        </a-radio-button>
                                </a-radio-group>
                                <div style="width: 400px; height: 200px;overflow: auto;">
                                    <ul class="icon-list">
                                        <li v-for="(item, index) in iconList" :key="index"  @click="hide(item)">
                                            <a-icon :type="item.name" :theme="getTheme(item)" />
                                            <span>{{ item.name }}</span>
                                        </li>
                                    </ul>
                                </div>
                            </a>
                            <a-button type="primary" size="small">选择图标</a-button>
                            <a-icon v-if="icon" :type="icon.name" :theme="getTheme(icon)" :title="icon.name" style="padding-left: 10px;"/>
                        </a-popover>
                    </a-form-model-item>
                    <a-form-model-item ref="url" label="组件路径" prop="resourcepath" v-if="form.menutype == 1">
                        <a-input v-model="form.resourcepath" />
                    </a-form-model-item>
                    <a-form-model-item ref="url" label="路由地址" prop="routerpath" v-if="form.menutype == 1 || form.menutype == 0">
                        <a-input v-model="form.routerpath" />
                    </a-form-model-item>
                    <a-form-model-item ref="role" label="权限标识" prop="role" v-if="form.menutype !== 0">
                        <a-input v-model="form.role" />
                    </a-form-model-item>
                    <a-form-model-item ref="level" label="显示排序" prop="level">
                        <a-input-number v-model="form.level" :min="0" :max="999" style="width: 100%;"/>
                    </a-form-model-item>
                    <a-form-model-item label="上级菜单" prop="parentid">
                        <a-tree-select
                            v-model="form.parentid"
                            show-search
                            style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            placeholder="Please select"
                            allow-clear
                            :tree-data="menuList"
                            :replaceFields="{title:'name', key:'id', value: 'id'}"
                            tree-default-expand-all
                        >
                        </a-tree-select>
                    </a-form-model-item>
                    <a-form-model-item label="插件" prop="plugid"  v-if="form.menutype == 3">
                        <a-select v-model="form.plugid" placeholder="请选择插件" @change="handlePluginChange">
                            <a-select-option v-for="(item, index) in plugList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="功能" prop="funcid"  v-if="form.menutype == 3">
                        <a-select v-model="form.funcid" placeholder="请选择功能" @change="handleFuncChange">
                            <a-select-option v-for="(item, index) in funcList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="是否外链" prop="urltype"  v-if="form.menutype != 2">
                        <a-radio-group v-model="form.urltype" :default-value="form.urltype">
                            <a-radio :value="0">
                                是
                            </a-radio>
                            <a-radio :value="1">
                                否
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="启用" prop="enabled"  v-if="form.menutype != 2">
                        <a-radio-group v-model="form.enabled" :default-value="form.enabled">
                            <a-radio :value="1">
                                启用
                            </a-radio>
                            <a-radio :value="0">
                                禁用
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { getPluginList } from '@/services/plugins'
import { saveMenu, editMenu, getMenuList } from '@/services/menu'
import VueIcon from '@ant-design/icons-vue'

export default {
    name: 'MenuForm',
    props: {
        menuList: {
            type: Array,
            default () {
                return []
            }
        },
        id: {
            type: String,
            default: undefined
        },
        optype: {
            type: String,
            default: undefined
        }
    },
    data () {
        return {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
            plugList: [],
            funcList: [],
            other: '',
            form: {
                parentid: undefined,
                name: undefined,
                menutype: 0,
                icon: undefined,
                level: 0,
                role: undefined,
                plugid: undefined,
                funcid: undefined,
                url: undefined,
                urltype: 1,
                enabled: 1,
                resourcepath: undefined,
                routerpath: undefined
            },
            icon: undefined,
            rules: {
                name: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ],
                menutype: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
                urltype: [{ required: true, message: '请选择是否外链接', trigger: 'change' }],
                enabled: [{ required: true, message: '请选择是否启用', trigger: 'change' }],
                routerpath: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
                level: [{ required: true, message: '请输入显示排序', trigger: 'blur' }],
                resourcepath: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
                plugid: [{ required: true, message: '请选择插件', trigger: 'change' }],
                funcid: [{ required: true, message: '请选择功能', trigger: 'change' }]
            },
            ModalText: 'Content of the modal',
            visible: false,
            popoverVisible: false,
            confirmLoading: false,
            icons: VueIcon.definitions.collection,
            iconList: [],
            theme: 'outline'
        }
    },
    watch: {
        id (newVal, oldVal) {
            console.log(newVal, oldVal, "CDDDDDDDDDDDDD")
            if (newVal) {
                this.getMenuDetail()
            }
        }
    },
    methods: {
        resetForm () {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
                this.icon = undefined;
                this.$emit('close');
            })
        },
        setForm (data) {
            for (const key in this.form) {
                if (Object.hasOwnProperty.call(this.form, key)) {
                    this.form[key] = data[key];
                }
            }
            this.icon = data['icon'] && JSON.parse(data['icon']);
        },
        handleOk() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.confirmLoading = true;
                    let saveService;
                    this.id ? saveService = editMenu : saveService = saveMenu;
                    saveService({
                        id: this.id,
                        ...this.form
                    }).then(res => {
                        console.log(res)
                        this.visible = false;
                        this.confirmLoading = false;
                        this.$emit('reload')
                        this.resetForm()
                    }).catch(err => {   
                        console.log(err)
                        this.visible = false;
                        this.confirmLoading = false;
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleCancel() {
            this.visible = false;
            this.resetForm()
        },
        handlePluginChange (e) {
            this.getPluginList(e)
        },
        handleFuncChange (e, item) {
            console.log(e, item)
            this.form.url = this.funcList[item.key].url
            console.log(this.form)
        },
        // 查询插件列表或明细
        getPluginList (id) {
            getPluginList({ id }).then(res => {
                let { result } = res['data']
                if (!id) {
                    this.plugList = result.data
                } else {
                    this.funcList = result.data[0].function
                }
            })
        },
        getMenuDetail () {
            getMenuList({ id: this.id }).then(res => {
                let { data } = res['data']['result'];
                console.log(data, "getMenuDetail")
                this.setForm(data[0]);
            })
        },
        getContent(icon) {
            let theme = this.getTheme(icon)
            if (theme === 'outlined') return `<a-icon type="${icon.name}"  />`
            return `<a-icon type="${icon.name}" theme="${theme}" />`
        },
        getThemeIcons() {
            if (this.theme == 'gold') this.iconList = Object.values(this.icons).filter(t => t)
            else this.iconList = Object.values(this.icons).filter(t => t.theme == this.theme)
        },
        handleThemeChange(e) {
            this.theme = e.target.value
            this.getThemeIcons()
        },
        hide(icon) {
            this.icon = icon;
            this.form.icon = JSON.stringify({
                name: icon.name,
                theme: this.getTheme(icon)
            });
            this.popoverVisible = false;
        },
        getTheme(item) {
            if (item.theme == 'outline') return 'outlined'
            if (item.theme == 'fill') return 'filled'
            if (item.theme == 'twotone') return 'twoTone'
        }
    },
    created () {
        this.getPluginList()
        this.getThemeIcons()
    }
}
</script>

<style lang="less" scoped>
    .search{
        margin-bottom: 54px;
    }
    .fold{
        width: calc(100% - 216px);
        display: inline-block
    }
    .operator{
        margin-bottom: 18px;
    }
    .mr {
        margin-right: 15px;
    }
    @media screen and (max-width: 900px) {
        .fold {
        width: 100%;
        }
    }
    .icon-list {
        margin: 10px 0;
        list-style: none;

        li {
            float: left;
            width: 100px;
            text-align: center;
            list-style: none;
            cursor: pointer;
            height: 50px;
            color: #555;
            transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
            position: relative;
            margin: 3px 0;
            border-radius: 4px;
            background-color: #fff;
            overflow: hidden;
            padding: 10px 0 0;
            &:hover {
                background-color: #1890ff;
                color: #fff;
            }
            span {
                display: block;
                text-align: center;
                transform: scale(0.83);
                font-family: Lucida Console, Consolas;
                white-space: nowrap;
            }
            .anticon {
                font-size: 16px;
                margin: 0;
                transition: transform 0.3s ease-in-out;
                will-change: transform;
            }
        }
    }
    .content {
        width: 500px;
        height: 300px;
        overflow: auto;
    }
</style>
